<template>
  <div class="index-wraper">
    <div v-if="upStatus" class="mask"></div>
    <div class="content">
      <div class="logo">
        <img src="../assets/images/logo-mini.png" alt="">
      </div>
      <GaugeEcharts :value="echartsValue" />

      <van-row class="per-margin">
        <van-col span="8" class="performance-wraper" v-for="item in performanceList">
          <div class="performance">
            <div>
              <span>{{ item.num }}</span>
              <span>{{ item.unit }}</span>
            </div>
            <div>{{ item.name }}</div>
          </div>
        </van-col>
      </van-row>

      <div v-if="!upStatus" class="switch-cell">
        <span>已开启</span>
        <img src="../assets/images/button-on.png" alt="" @click="onButtonOn">
      </div>

      <div v-if="upStatus" class="switch-cell" :class="{ 'z-index': upStatus }">
        <span>已关闭</span>
        <img src="../assets/images/button-off.png" alt="" @click="onButtonOff">
      </div>

      <div>
        <van-row gutter="16">
          <van-col span="12" class="model" v-for="(item, index) in modelList">
            <div @click="onClickModel(index, item)" :class="{'model-active':selected.indexOf(item.id)!=-1}">
              <template v-if="index == 0">
                <img src="../assets/images/model-auto-active.png" alt="">
              </template>
              <template v-if="index == 1">
                <img src="../assets/images/model-night-active.png" alt="">
              </template>
              
              <span>{{ item.title }}</span>
            </div>
          </van-col>
        </van-row>

        <div class="wind-speed">
          <div class="card-header">风速</div>
          <div class="card-body">
            <van-steps :active="active" active-icon="success" inactive-icon="success" @click-step="onSclickStep">
              <van-step>1档</van-step>
              <van-step>2档</van-step>
              <van-step>3档</van-step>
              <van-step>4档</van-step>
            </van-steps>
          </div>
        </div>

        <div class="uvc set-timeout">
          <span>定时</span>
          <div class="un-setting" @click="onSetTimeout">
            <span>{{ timeoutValue }}</span>
            <img src="../assets/images/arrow-right.png" alt="">
          </div>
        </div>

        <div class="uvc">
          <span>UVC-LED</span>
          <span class="time">{{ UVC }}小时</span>
          <div class="reset-btn" @click="onUVCReset">
            <img src="../assets/images/reset.png" alt="">
            <span>重置</span>
          </div>
        </div>

        <div class="uvc">
          <span>滤网计时</span>
          <span class="time">{{ filterNetTime }}小时</span>
          <div class="reset-btn" @click="onStrainerReset">
            <img src="../assets/images/reset.png" alt="">
            <span>重置</span>
          </div>
        </div>
      </div>
      
      <van-action-sheet v-model:show="show">
        <div class="timeout">
          <van-picker 
            title="定时" 
            confirm-button-text="确定" 
            :columns="columns" 
            @confirm="onConfirm"
            @cancel="onCancel"
            @change="onChange"
            />
          <div class="timeout-unit">小时&nbsp;后</div>
        </div>
      </van-action-sheet>

    </div>
  </div>
</template>

<script>
import { reactive, onMounted, toRefs, computed  } from 'vue'
import { showConfirmDialog, showToast, showDialog } from 'vant'


import GaugeEcharts from './GaugeEcharts.vue'

const { hexModel, COMMANDS, hexTransform, parseArray, filterWind } = require('../utils/util.js')

var miotLinkBaseNativeJs_client = null,
  miotLinkBaseNativeJs_puId = null,
  miotLinkBaseNativeJs_modelId = null,
  miotLinkBaseNativeJs_kindId = null,
  miotLinkBaseNativeJs_state = null,
  miotLinkBaseNativeJs_mac = null,
  miotLinkBaseNativeJs_puNickName = null,
  miotLinkBaseNativeJs_cuId = null,
  miotLinkBaseNativeJs_cuName = null,
  miotLinkBaseNativeJs_cuLocation = null,
  miotLinkBaseNativeJs_userdata = null,
  miotLinkBaseNativeJs_language = null,
  miotLinkBaseNativeJs_sequence = null,
  miotLinkBaseNativeJs_init = "uninit",
  miotLinkBaseNativeJs_payRes = "payRes";


//puId,modelId,kindId,state,province,city //language
var define_miotlink_init = JSON.stringify({
  code: 'init',
  data: {
    getInitPuData: 'true',
    hiddenPluginTitle: 'true',
    getLanguage: 'true',
    getCuInfo: 'true',
    pluginTitle: {
      background: '#FFFFFF',
      backAndMoreImg: 'black',
      hiddenTitleName: 'true',
      titleName: '车载消毒机',
      titleColor: '#666666'
    }
  }
})

console.log(define_miotlink_init, 'define_miotlink_init=======')

var define_miotlink_returnDeviceList = "{\"code\":\"returnDeviceList\"}";
var define_miotlink_code_initRes = "initRes",
  define_miotlink_code_notifyUartData = "notifyUartData",
  define_miotlink_code_notifyDeviceState = "notifyDeviceState",
  define_miotlink_code_getAdditionalInfoRes = "additionalInfoRes",
  define_miotlink_code_goBackRes = "goBackRes";

export default {
  name: 'Index',
  components: {
    GaugeEcharts
  },
  setup() {
    const state = reactive({
      currentRate: 0,
      rate: 90,
      gradientColor: {
        '0%': '#5795FE',
        '100%': '#63D6FF',
      },
      performanceList: [
        {
          name: '温度',
          unit: '℃',
          num: 0
        },
        {
          name: '湿度',
          unit: '%',
          num: 0
        },
        {
          name: '风速',
          unit: 'm³/h',
          num: 0
        }
      ],
      modelList: [
        {
          id: 'auto',
          title: '自动模式',
          selected: false
        },
        {
          id: 'night',
          title: '夜间模式',
          selected: false
        }
      ],
      active: 0, // 进度条
      columns: [
        // 第一列
        [
          { text: '01', value: '01' },
          { text: '02', value: '02' },
          { text: '03', value: '03' },
          { text: '04', value: '04' },
          { text: '05', value: '05' },
          { text: '06', value: '06' },
          { text: '07', value: '07' },
          { text: '08', value: '08' },
          { text: '09', value: '09' },
          { text: '10', value: '10' },
          { text: '11', value: '11' },
          { text: '12', value: '12' },
          { text: '13', value: '13' },
          { text: '14', value: '14' }
        ],
      ],
      show: false, // 定时弹出面板
      timeoutValue: '未设置',
      upStatus: false,
      echartsValue: 0, // 仪表盘数据，设备会传 0,1,2
      echartsLevel: 0, // 空气质量等级 - 仪表盘
      modelActive: 2, // 自动模式与夜间模式的切换样式控制
      selected: ['', ''], // 自动为1， 夜间为0
      receviceParsesData: {},
      UVC: 0,
      filterNetTime: 0
    })

    const text = computed(() => state.currentRate.toFixed(0) + '%')

    onMounted(() => {
    
      miotLinkBaseNativeJs_initIos()
      miotLinkBaseNativeJs_initAndroid()
      sendToNative_sendUartData('F1F1F000F07E')
      
      // console.log(window, 'window')
      // showDialog({
      //   title: '提示',
      //   message: '请及时更换UVC-LED',
      //   confirmButtonText: '知道了'
      // })

      // showDialog({
      //   title: '提示',
      //   message: '请及时更换滤网',
      //   confirmButtonText: '知道了'
      // })
      
    })

    const onSclickStep = (steps) => {
      const hex = hexTransform(steps + 1, 0)
      sendToNative_sendUartData(hex)
      
      state.active = steps
    }

    // UV灯重置弹框
    const onUVCReset = () => {
      showConfirmDialog({
        title: '提示',
        confirmButtonText: '确定',
        message:
          '确定要将UV灯重置吗？'
      }).then(() => {
        const hex = COMMANDS.UVC
        sendToNative_sendUartData(hex)
      }).catch(() => {
        console.log('catch')
      })
    }

    // 滤网重置弹框
    const onStrainerReset = () => {
      showConfirmDialog({
        title: '提示',
        confirmButtonText: '确定',
        message:
          '确定要将滤网重置吗？'
      }).then(() => {
        const hex = COMMANDS.FILTER_TIMER
        sendToNative_sendUartData(hex)
      }).catch(() => {
        console.log('catch')
      })
    }

    const onSetTimeout = () => {
      state.show = true
    }

    const onConfirm = ({ selectedValues }) => {
      const time = parseInt(selectedValues.join(',')) * 60
      const hex = hexTransform(time, 2, 2)
      sendToNative_sendUartData(hex)

      showToast(`当前值: ${selectedValues.join(',')}`)
      state.timeoutValue = `${selectedValues.join(',')}小时后`
      state.show = false
    };
    const onChange = ({ selectedValues }) => {
      showToast(`当前值: ${selectedValues.join(',')}`)
    };
    const onCancel = () => {
      showToast('取消')
      state.show = false
    }

    const onClickModel = (index, item) => {
      // selected: ['auto', 'night']

      if (state.selected.indexOf(item.id) !== -1) { 
        state.selected[index] = ''
      } else {
        state.selected[index] = item.id
      }

      console.log(state.selected, 'state.selected----哇哈哈哈或')
      console.log(state.selected.length, '长度---')
      console.log(typeof state.selected, 'state.selected----typf')
      const hex = hexModel(state.selected)
      console.log(hex, '模式-----------')

      // 将模式命令发送给设备
      sendToNative_sendUartData(hex)
    }

    const onButtonOn = () => {
      const hex = COMMANDS.OFF
      
      sendToNative_sendUartData(hex)
    }
    const onButtonOff = () => {
      const hex = COMMANDS.ON
      sendToNative_sendUartData(hex)
    }

    /**=============================================*/ 
    window.receiverDeviceData = data => {// 监听 Android端的数据
      console.log(data, '监听 Android端的数据')
      console.log(JSON.parse(data), '监听 Android端的数据')


      if (miotLinkBaseNativeJs_init != "initOk") {
        //alert("Android-未正确初始化，接受数据不予处理！");
        return;
      }
      miotLinkBaseNativeJs_receive(data);
    }

    const miotLinkBaseNativeJs_receive = (data) => {
      // console.log(data, 'data===')
      var dataJsonObj = null
      if (typeof data == 'string') {
        dataJsonObj = JSON.parse(data);
      } else {
        dataJsonObj = data
      }
      console.log(dataJsonObj, 'dataJsonObj')

      var code = (dataJsonObj.code).toLowerCase();
      if (code == define_miotlink_code_goBackRes.toLowerCase()) {
        console.log(1)
        receiveFromNative_goBackRes();
        return;
      }
      var clientDataJsonObj = dataJsonObj.data;
      console.log(clientDataJsonObj.puId, 'clientDataJsonObj.puId')
      console.log(miotLinkBaseNativeJs_puId, 'miotLinkBaseNativeJs_puId')

      console.log(code, 'clientDataJsonObj.code')
      console.log(define_miotlink_code_getAdditionalInfoRes.toLowerCase(), 'define_miotlink_code_getAdditionalInfoRes')
      console.log(define_miotlink_code_getAdditionalInfoRes, 'define_miotlink_code_getAdditionalInfoRes')
      console.log(miotLinkBaseNativeJs_payRes, 'miotLinkBaseNativeJs_payRes')
      console.log(define_miotlink_code_initRes, 'define_miotlink_code_initRes')

      if (clientDataJsonObj.puId != miotLinkBaseNativeJs_puId && code != define_miotlink_code_getAdditionalInfoRes.toLowerCase() && code != miotLinkBaseNativeJs_payRes.toLowerCase()) {
        console.log("此消息非本设备消息！监听：" + miotLinkBaseNativeJs_puId + ",收到：" + clientDataJsonObj.puId);
        return;
      }
      if (code == define_miotlink_code_initRes.toLowerCase()) { //收到初始化返回
        console.log(2)
        miotLinkBaseNativeJs_initData(clientDataJsonObj);
      } else if (code == define_miotlink_code_notifyDeviceState.toLowerCase()) { //收到设备上下线
        console.log(3)
        receiveFromNative_deviceState(clientDataJsonObj.state, clientDataJsonObj.sequence)
      } else if (code == define_miotlink_code_notifyUartData.toLowerCase()) { // 收到串口数据
        console.log(4)
        console.log(clientDataJsonObj.uart, 'uart--收到的uart')
        console.log(typeof clientDataJsonObj.uart, 'uart--收到的uart')
        receiveFromNative_uartData(clientDataJsonObj.uart);
      } else if (code == define_miotlink_code_getAdditionalInfoRes.toLowerCase()) { // 收到附加信息
        console.log(5)
        receiveFromNative_additionalInfoRes(clientDataJsonObj);
      } else if (code == miotLinkBaseNativeJs_payRes.toLowerCase()) {
        console.log(6)
        console.log(JSON.stringify(clientDataJsonObj), 'JSON.stringify(clientDataJsonObj)')
        receiveFromNative_pay(clientDataJsonObj.parmas.state);
      }
    }

    function receiveFromNative_goBackRes() {
			sendToNative_returnDeviceList();
		}
    function sendToNative_returnDeviceList() { 
      console.log(miotLinkBaseNativeJs_client, 'miotLinkBaseNativeJs_client 设备系统')
			if (miotLinkBaseNativeJs_client == "Android") {
				miotLinkBaseNativeJs_sendToAndroid(define_miotlink_returnDeviceList);
			} else if (miotLinkBaseNativeJs_client == "IOS") {
				miotLinkBaseNativeJs_sendToIos(define_miotlink_returnDeviceList);
			} else {
        console.log('other')
				var u = navigator.userAgent;
				var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
				var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
				if(isAndroid == true){
					miotLinkBaseNativeJs_sendToAndroid(define_miotlink_returnDeviceList);
				} else if(isiOS == true) {
					miotLinkBaseNativeJs_sendToIos(define_miotlink_returnDeviceList);
				}
			}
		}

    const miotLinkBaseNativeJs_initData = (clientInitData) => {
      console.log(clientInitData, 'clientInitData')
      
      miotLinkBaseNativeJs_client = clientInitData.client;
      miotLinkBaseNativeJs_language = clientInitData.language;
      miotLinkBaseNativeJs_puId = clientInitData.pu.puId;
      miotLinkBaseNativeJs_kindId = clientInitData.pu.kindId;
      miotLinkBaseNativeJs_modelId = clientInitData.pu.modelId;
      miotLinkBaseNativeJs_userdata = clientInitData.pu.userdata;
      miotLinkBaseNativeJs_state = clientInitData.pu.state;
      miotLinkBaseNativeJs_mac = clientInitData.pu.mac;
      miotLinkBaseNativeJs_puNickName = clientInitData.pu.puNickName;
      miotLinkBaseNativeJs_cuId = clientInitData.cu.cuId;
      miotLinkBaseNativeJs_cuName = clientInitData.cu.cuName;
      miotLinkBaseNativeJs_cuLocation = clientInitData.cu.location;
      miotLinkBaseNativeJs_init = "initOk";
    }

    const receiveFromNative_deviceState = (state, sequence) => {
      console.log(state, 'state receiveFromNative_deviceState')
      console.log(sequence, 'sequence receiveFromNative_deviceState')

      miotLinkBaseNativeJs_state = state;
      miotLinkBaseNativeJs_sequence = sequence;
      //alert("请重写receiveDeviceState方法，实现设备上下线的界面显示。state = " + state + ",puId = " + miotLinkBaseNativeJs_puId);
      if(state == 1){
        console.log('state=1')
      } else if(state == 0){
        console.log('啊哦，设备离线咯！')
      }
    }

    //接收设备数据
    const receiveFromNative_uartData = (data) => {
      console.log(data, 'receiveFromNative_uartData 接收设备数据')
      console.log(typeof data, 'receiveFromNative_uartData 接收设备数据')

      let receiveData = data
      
      console.log(receiveData, 'receiveData---')
      receiveData = parseArray(receiveData)

      console.log(receiveData, 'receiveData parseData---校验之后返回的数据')
      console.log(typeof receiveData, 'receiveData parseData---校验之后返回的数据')


      console.log("请重写receiveUartData方法，实现H5端的界面显示。data = " + data);


      if (receiveData.verify) {
        state.receviceParsesData = receiveData.data
        draw(receiveData.data)
      } else {
        showDialog({
          title: '提示',
          message: receiveData.msg,
          confirmButtonText: '知道了'
        })
      }
    }

    const draw = receiveData => {
      console.log(receiveData, 'receiveData 开始画页面')
      if(receiveData['000A']) {
        console.log(receiveData['000A'], '000A---')
        const value = Number(`0x${receiveData['000A']}`)
        console.log(value, 'value===')
        const timeout = parseInt(value, 10)
        state.timeoutValue = timeout + '小时后'
      }
      if(receiveData['000B']) {
        const onOff = Number(`0x${receiveData['000B']}`)
        console.log(onOff)
        state.upStatus = onOff ? false : true

        console.log(state.upStatus, 'state.upStatus')
      }
      if(receiveData['0001']) {
        const value = Number(`0x${receiveData['0001']}`)
        const wind = parseInt(value, 10)
        console.log(wind, 'wind')
        
        state.active = wind - 1
        console.log(filterWind(wind), 'filterWind(wind)')
        state.performanceList[2].num = filterWind(wind)
      }
      if(receiveData['0002']) {
        const value = Number(`0x${receiveData['0002']}`)
        const tvoc = parseInt(value, 10)
        console.log(tvoc, 'tvoc')
        state.echartsValue = tvoc
      }
      if(receiveData['0003']) {
        const value = Number(`0x${receiveData['0003']}`)
        const temperature = parseInt(value, 10)
        state.performanceList[0].num = temperature
      }
      if(receiveData['0004']) {
        const value = Number(`0x${receiveData['0004']}`)
        const humidity = parseInt(value, 10)
        state.performanceList[1].num = humidity
      }
      if(receiveData['0005']) {
        const value = Number(`0x${receiveData['0005']}`)
        const uvc = parseInt(value, 10)
        state.UVC = uvc
      }
      if(receiveData['0007']) {
        const value = Number(`0x${receiveData['0007']}`)
        const filterNet = parseInt(value, 10)
        state.filterNetTime = filterNet
      }
      if(receiveData['0009']) {
        const value = Number(`0x${receiveData['0009']}`)
        const model = parseInt(value, 10)
        console.log(model, 'model') // ['auto', 'night']
        if(model == 0) {
          state.selected = ['' ,'']
        }
        if(model == 1) { // 夜间开，自动关
          state.selected = ['' ,'night']
        }
        if(model == 2) { // 夜间关，自动开
          state.selected = ['auto' ,'']
        }
        if(model == 3) {
          state.selected = ['auto' ,'night']
        }
      }
    }

    const receiveFromNative_additionalInfoRes = (additionalInfo) => {
      console.log(additionalInfo, 'additionalInfo')
      //alert("请重写receiveGetAdditionalInfoRes 收到附加信息 方法，实现H5端的界面显示。additionalInfo = " + JSON.stringify(additionalInfo));
    }
    const receiveFromNative_pay = (payinfo) => {
      console.log(payinfo, 'payinfo')
    }

    const doLoadAction = (uartData, params) => {
      sendToNative_sendUartData(uartData);
    }
    //发送设备数据
    const sendToNative_sendUartData = (hexUartData) => {
      console.log(hexUartData, '发送设备数据: hexUartData')
      hexUartData = hexUartData.replace(/\s+/g, "");
      // var data = "{\"code\":\"sendDeviceUartData\",\"data\":{\"puId\":\"" + miotLinkBaseNativeJs_puId + "\",\"uartDataType\":\"0\",\"uartData\":\"" + hexUartData + "\"}}";

      let data = {
        code: 'sendDeviceUartData',
        data: {
          puId: miotLinkBaseNativeJs_puId,
          uartDataType: '0',
          uartData: hexUartData
        }
      }
      data = JSON.stringify(data)


      console.log(data, 'data--hexUartData')
      console.log(miotLinkBaseNativeJs_client, '设备系统')
      if (miotLinkBaseNativeJs_client == "Android") {
        miotLinkBaseNativeJs_sendToAndroid(data);
      } else if (miotLinkBaseNativeJs_client == "IOS") {
        miotLinkBaseNativeJs_sendToIos(data);
      }
      
      //发送ajax请求
    }
    const miotLinkBaseNativeJs_sendToAndroid = (data) => {
      console.log(data, 'data=====miotLinkBaseNativeJs_sendToAndroid')
      console.log(miotLinkBaseNativeJs_init, 'miotLinkBaseNativeJs_init data=====')
      if (miotLinkBaseNativeJs_init != "initOk") {
        console.log(12)
        //alert("Android-未正确初始化，发送数据不予处理！");
        return;
      }
      console.log(333)
      return miotlink_js_bridge.receiveHtmlData(data);
    }

    /**
     * IOS
     * @param {*} data 
     */
    const miotLinkBaseNativeJs_sendToIos = (data) => {
      console.log(data, 'miotLinkBaseNativeJs_sendToIos data')
      connectWebViewJavascriptBridge(function(bridge) {
        console.log(bridge, 'bridge--')
        bridge.callHandler('changeNaviStatus', data, function(response) {
          console.log(1111)
          miotLinkBaseNativeJs_receive(response);
        });
        bridge.registerHandler("receiverDeviceData", function(data) {
          console.log(222)
          miotLinkBaseNativeJs_receive(data);
        });

        if(miotLinkBaseNativeJs_init == "uninit") {
          console.log(3333)
          bridge.init(function(data, responseCallback) {
            console.log(4444)
            miotLinkBaseNativeJs_receive(data);
          });
          bridge.registerHandler("receiverDeviceData", function(data) {
            console.log(5555)
            miotLinkBaseNativeJs_receive(data);
          });
        }
      });
    }
    /** 
     * ios
     * 原生APP跳转到H5页面时，往往需要携带一些用户信息，之前做法是在跳转的地址中拼接H5页面需要的参数，
     * 现在通过window.WebViewJavascriptBridge悄悄的进行数据交互
    */
    const connectWebViewJavascriptBridge = (callback) => {
      console.log('ook-')
      console.log(window.WebViewJavascriptBridge, 'window.WebViewJavascriptBridge-')
      console.log(window.WVJBCallbacks, 'window.WVJBCallbacks-')
      
      if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
      if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
      window.WVJBCallbacks = [callback];
      var WVJBIframe = document.createElement('iframe');
      WVJBIframe.style.display = 'none';
      WVJBIframe.src = 'https://__bridge_loaded__';
      document.documentElement.appendChild(WVJBIframe);
      console.log(WVJBIframe, 'WVJBIframe')
      setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
      if(window.WebViewJavascriptBridge) {
        callback(WebViewJavascriptBridge);
      } else {
        document.addEventListener('WebViewJavascriptBridgeReady', function() {
          callback(WebViewJavascriptBridge)
        }, false)
      }
    }

    /**
     * IOS客户端
     */
    const miotLinkBaseNativeJs_initIos = () => {
      miotLinkBaseNativeJs_sendToIos(define_miotlink_init);
    }

    /**
     * android客户端
     */
    const miotLinkBaseNativeJs_initAndroid = () => { 
      console.log('调用了=')
      try {
        console.log(define_miotlink_init, '========')
        var androidClientData = miotlink_js_bridge.receiveHtmlData(define_miotlink_init);
        console.log(JSON.parse(androidClientData), 'androidClientData')
        miotLinkBaseNativeJs_receive(androidClientData);
      } catch (e) {
        console.log(e, 'e')
        ////alert("and:"+e);
        console.log(11)
      }
    }

    /**=============================================*/ 

   
    return {
      ...toRefs(state),
      text,
      onSclickStep,
      onUVCReset,
      onStrainerReset,
      onSetTimeout,
      onConfirm,
      onChange,
      onCancel,
      onClickModel,
      onButtonOn,
      onButtonOff,
      miotLinkBaseNativeJs_receive,
      miotLinkBaseNativeJs_initData,
      receiveFromNative_deviceState,
      receiveFromNative_uartData,
      receiveFromNative_additionalInfoRes,
      receiveFromNative_pay,
      doLoadAction,
      sendToNative_sendUartData,
      miotLinkBaseNativeJs_sendToAndroid,
      miotLinkBaseNativeJs_sendToIos,
      connectWebViewJavascriptBridge,
      miotLinkBaseNativeJs_initIos,
      miotLinkBaseNativeJs_initAndroid,
      draw
    }
  },
}


</script>
<style lang='less'>
  .z-index {
    position: relative;
    z-index: 11111111111111;
  }
  .mask {
    width: 100%;
    height: 100%;
    background-color: #fff;
    opacity: 0.5; 
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1000;
  }
  .index-wraper {
    min-height: 100vh;
    background-color: #F4F4F8;
    padding-bottom: 60px;
    padding-top: 188px;
    position: relative;
    user-select: none;

    & > .content {
      padding: 0 32px;
      position: relative;
      .logo {
        position: absolute;
        top: 20px;
        left: 32px;
        img {
          width: 97px;
          height: 80px;
        }
      }
    }

    .per-margin {
      margin-top: -90px;
    }

    .performance {
      display: flex;
      flex-direction: column;
      align-items: center;
      div:nth-of-type(1) {
        span:nth-of-type(1) {
          font-size: 45px;
          font-weight: bold;
        }
        span:nth-of-type(2) {
          font-size: 22px;
          color: #9BA2AE;
          margin-left: 6px;
        }

      }
      div:nth-of-type(2) {
        font-size: 25px;
      }
    }
    .performance-wraper:nth-of-type(2) {
      position: relative;
    }
    .performance-wraper:nth-of-type(2)::after {
      content: '';
      width: 2px;
      height: 48px;
      background-color: #B7B7BA;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%)
    }
    .performance-wraper:nth-of-type(2)::before {
      content: '';
      width: 2px;
      height: 48px;
      background-color: #B7B7BA;
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%)
    }

    .switch-cell {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-radius: 18px;
      padding: 20px;
      background-color: #fff;
      margin-top: 48px;
      span {
        font-size: 30px;
      }
      img {
        width: 75px;
        height: 75px;
      }
    }

    .model {
      margin: 16px 0;
      div {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #FFF;
        border-radius: 18px;
        padding: 26px 0;
        border: 1px solid #FFF;

        span {
          font-size: 28px;
          color: #4A5A78;
          margin-top: 8px;
        }
        img {
          width: 50px;
          height: 50px;
        }
      }

      .model-active {
        border: 1px solid #5794FE;
        background-color: #F2F9FF;
      }
    }
    .timeout{
      position: relative;
      .timeout-unit {
        position: absolute;
        left: calc(50% + 90px);
        top: calc(50% + 40px);
        transform: translate(-50%, -50%);
        font-size: 30px;
        color: #5794FE;
      }

      .van-picker-column__item--selected {
        color: #5794FE;
      }
    }

    
    .wind-speed {
      border-radius: 18px;
      background-color: #FFF;
      .card-header {
        border-bottom: 2px solid #F0F0F0;
        font-size: 30px;
        color: #000;
        padding: 25px 20px;
      }
      .card-body {
        padding: 25px 20px;
      }
      /**steps */
      
      .van-steps {
        // 自定义调整进度条的粗细
        .van-step__line {
          top: 0;
          height: 18px; 
          background-color: #ECECF0;
        }
        // 自定义激活时进度条的颜色
        .van-step--finish .van-step__line {
          background-color: #5794FE; 
        }

        // 文字位置
        .van-step__title {
          font-size: 30px;
          padding-top: 50px;
        }
        .van-steps__items {
          padding-bottom: 0;
        }

        .van-step__circle-container {
          top: 9px;
          background: transparent;
        }
        // 当前圆点
        .van-step__icon {
          width: 8px;
          height: 18px;
          border-radius: 6px;
          
          background-color: #BFBFBF;
        }
        .van-step__icon--active {
          width: 14px;
          height: 14px;
          border-radius: 50px;
          background-color: #5794FE;
          border: 13px solid #FFF;
          box-shadow: 4px 4px 20px #ccc;
          margin-left: -14px;
        }
        
        .van-step__icon::before {
          content: '';
        }
        .van-step--horizontal:first-child .van-step__title {
          margin-left: -20px;
        }
        .van-step--horizontal:last-child .van-step__title {
          margin-right: -20px;
        }
      }
    
    }

    .uvc {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #FFF;
      border-radius: 18px;
      margin-top: 16px;
      padding: 36px 20px;

      & > span {
        font-size: 30px;
      }
      .time {
        flex: 1;
        color: #5794FE;
        margin-left: 20px;
      }

      .un-setting {
        display: flex;
        align-items: center;

        span {
          font-size: 24px;
          color: #9BA2AE;
          margin-right: 16px;
        }
        img {
          width: 12px;
          height: 21px;
        }
      }
      .reset-btn {
        display: flex;
        align-items: center;
        border: 1px solid #5794FE;
        border-radius: 27px;
        padding: 14px 23px;

        img {
          width: 28px;
          height: 28px;
          margin-right: 8px;
        }
        span {
          font-size: 25px;
          color: #5794FE;
        }
      }
    }
    
  }
  
</style>